<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>

    <h:body>


        <ui:composition template="/template/common/commonLayout.xhtml">                

            <ui:define name="content">


                <p:layoutUnit position="center">


                    <div align="center">

                        <p:panelGrid columns="1" styleClass="mainTitleBox">
                            <h:outputText value="Campañas" styleClass="mainTitle"/>
                        </p:panelGrid>

                        <h:form id="form">
                            <p:dataTable var="camp"
                                         rows="10"
                                         value="#{CampaignBean.dtos}" 
                                         paginator="true"                                     
                                         selection="#{CampaignBean.selected}"
                                         id="campainsTable"                                     
                                         rowKey="#{camp.id}"                                     
                                         style="width: 700px; height: auto; padding-top: 15px; padding-bottom: 15px">

                                <f:facet name="header">
                                    Data
                                </f:facet>                            
                                <p:column selectionMode="single" style="width:16px;text-align:center">
                                    <f:param name="id2" value="#{camp.id}"/>
                                </p:column>

                                <p:column headerText="Nombre Campaña">
                                    <h:outputText value="#{camp.name}"/>
                                </p:column>

                                <p:column headerText="Descripción">
                                    <h:outputText value="#{camp.description}"/>
                                </p:column>

                                <p:column headerText="Imagen Campaña">
                                    <p:graphicImage value="#{CampaignBean.image}" height="76" width="100">
                                        <f:param name="id" value="#{camp.id}"/>
                                    </p:graphicImage>
                                </p:column>

                                <f:facet name="footer">
                                    <p:growl id="growl" life="5000"/>
                                    <p:commandButton actionListener="#{CampaignBean.deleteEvent}" 
                                                     update="growl"                                                 
                                                     icon="ui-icon-search"                                                 
                                                     value="Eliminar">
                                        <p:confirm header="Confirmar" 
                                                   message="¿ Desea eliminar la Campaña ?"
                                                   icon="ui-icon-alert"/>
                                    </p:commandButton>                                    

                                    <p:confirmDialog global="true" 
                                                     showEffect="fade" 
                                                     hideEffect="explode">
                                        <div align="center">
                                        <p:commandButton value="Aceptar"
                                                         type="button" 
                                                         styleClass="ui-confirmdialog-yes"
                                                         icon="ui-icon-check"/>
                                        <p:commandButton value="Cancelar" 
                                                         immediate="true"
                                                         type="button"
                                                         styleClass="ui-confirmdialog-no"
                                                         icon="ui-icon-close"/>
                                        </div>
                                    </p:confirmDialog>
                                </f:facet>

                            </p:dataTable>

                        </h:form>

                    </div>

                </p:layoutUnit>

            </ui:define>

        </ui:composition>

    </h:body>
</html>